<template>
  <view v-if="show" class="popup-container">
    <view class="container flex-col">
      <image class="img-close" src="@/static/login/guanbi.png" @click="close()"></image>
      <text class="sub-title" style="margin-top: 100rpx">
        你要学什么车型
      </text>
      <view class="row">
        <picker @change="bindPickerChange" class="f1" :value="index" :range="array">
          <view class="flex">
            <view class="f1">{{ array[index] }}</view>
            <view class="more">更改</view>
          </view>
        </picker>
      </view>
      <text class="sub-title" style="margin-top: 46rpx">
        手机号
      </text>
      <view class="row">
        <input placeholder="请输入手机号" maxlength="11" v-model="phone" class="input" placeholder-class="placeholder"/>
        <button
            class="more"
            open-type="getPhoneNumber"
            @getphonenumber="getPhoneNumberHandler">获取
        </button>
      </view>
      <text class="sub-title" style="margin-top: 46rpx">
        报名地
      </text>
      <view class="row" @click="toSelectLocal">
        <view class="f1">{{ city.name }}</view>
        <view class="more">更改</view>
      </view>
      <text class="sub-title" style="margin-top: 46rpx">
        是否已报名驾校
      </text>
      <view class="row">
        <radio-group @change="onCheckChange" class="flex f1">
          <view class="radio-label-container">
            <radio value="1" class="m-r-20 f1" color="#3073f6" :checked="isBaoming==='1'"/>
            <text class="radio-label">已报名</text>
          </view>
          <view class="radio-label-container">
            <radio value="2" class="m-r-20 f1" color="#3073f6" :checked="isBaoming==='2'"/>
            <text class="radio-label">未报名</text>
          </view>
        </radio-group>
      </view>
      <view @click="toUpdate" class="custom-btn primary input-container">{{school?'提交领取VIP':'确认'}}</view>
      <view class="help" v-if="page !== 'home'">提交手机号后，驾校会联系你</view>
    </view>
  </view>
</template>

<script>
import {commonApi, schoolApi} from "@/api";
import utils from "../libs/utils";

export default {
  name: "ZixunDialog",
  props: ['page'],
  data() {
    return {
      phone: '',
      isBaoming: null,
      school: null,
      city: null,
      show: false,
      index: 0,
      array: [
        'C1手动挡',
        'C2自动挡'
      ]
    };
  },
  computed: {},
  methods: {
    async getPhoneNumberHandler(e) {
      const phone = await utils.getPhoneNumberHandler(e)
      if (phone) {
        this.phone = phone
      }
    },
    open(school, selectedLocation) {
      this.index = 0
      this.isBaoming = null
      this.phone = null
      this.show = true
      this.school = school
      this.city = selectedLocation || school.city || {code: 100000, name: '北京'}
      console.log('selectedLocation', selectedLocation)
      // this.$refs.popup.open()
    },
    toSelectLocal() {
      uni.$once('select_local', (data) => {
        if(data && data.city) {
          this.city = data.city
        }
        console.log('data', data)
      })

      uni.navigateTo({url: '/pages/select_local/select_local?type=return'})
    },
    bindPickerChange: function (e) {
      this.index = e.detail.value
    },
    close() {
      this.show = false
    },
    onCheckChange(e) {
      console.log(e)
      this.isBaoming = e.detail.value
    },
    checkPhone(phone) {
      console.log(phone)
      if (!phone || !(/^1\d{10}$/.test(phone))) {
        uni.showToast({
          title: '请输入有效的手机号',
          icon: 'none',
          duration: 2000
        });
        return false;
      }
      return true;
    },
    async toUpdate() {
      if (!this.checkPhone(this.phone)) {
        return
      }

      if (!this.city) {
        return uni.showToast({
          title: '请选择报名地',
          icon: 'none',
          duration: 2000
        });
      }

      if (!this.isBaoming) {
        return uni.showToast({
          title: '请选择是否已报名',
          icon: 'none',
          duration: 2000
        });
      }

      try {
        await schoolApi.createRegistration(this.index, this.school.id, this.phone, this.city.code, this.isBaoming === '1' ? 1 : 0)
        this.$emit('success')
        uni.showToast({
          title: '提交成功，驾校将联系您！',
          icon: 'none',
          duration: 2000
        });
        this.close()
      } catch (e) {
        uni.showToast({
          title: e.data.msg,
          icon: 'none',
          duration: 2000
        });
      }
    },
  },
}
</script>

<style lang="scss">
.popup-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
}

.container {
  width: 700upx;
  background-color: #fff;
  border-radius: 24upx;
  position: relative;
  padding-bottom: 52upx;

  .img-close {
    position: absolute;
    top: 48upx;
    right: 48upx;
    width: 26upx;
    height: 26upx;
  }

  .sub-title {
    margin-left: 36rpx;
    font-size: 18px;
    color: #000;
    font-weight: bold;
  }

  .radio-label-container {
    flex: 1;
    display: flex;
    position: relative;
    align-items: center;

    radio {
      z-index: 1;
    }

    .radio-label {
      position: absolute;
      left: 80rpx;
    }
  }

  .row {
    height: 100rpx;
    display: flex;
    align-items: center;
    margin-left: 36rpx;
    margin-right: 36rpx;
    font-size: 16px;
    color: #626262;
    border-bottom: 1px solid #ECECEC;

    .more {
      font-size: 16px;
      color: #3489FE;
    }
  }

  .input-container {
    height: 88upx;
    margin-top: 50rpx;
    margin-left: 40upx;
    margin-right: 40upx;
  }

  .placeholder {
    font-size: 16px;
    color: #959595;
  }

  .input {
    font-size: 16px;
    color: #000;
    flex: 1;
  }

  .divider {
    background-color: #ddd;
    width: 1px;
    height: 66upx;
    margin-right: 10upx;
  }

  .help {
    text-align: center;
    font-size: 14px;
    margin-top: 40upx;
    color: #929292;
  }
}
</style>
